
<style>
    #listimage .list-image-item {
        width: 98px;
        margin: 5px;
        float: left;
    }
    .list-image-item i {
        float: right;
        padding: 5px 0px 0px 0px;
    }
</style>
<div class="row-fluid sortable ui-sortable">
    <form class="form-horizontal" id="addTopic" method="post" enctype="multipart/form-data" action="<?php echo $this->url('admin/child', array('controller'=>'topic','action'=>'addnew')) ?>">
    <div class="span12">
         <div class="span6">
               <h4> New topic for admin</h4>
         </div>
        <div class="btn_group span6" style="text-align: right">
            <?php if($response['status']): ?>
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <?=$response['message']?>
            </div>
            <?php endif ?>
            <?php if($response['status'] == false && $response['status'] != ''): ?>
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <?=$response['message']?>
                </div>
            <?php endif ?>
            <button type="button" class="btn btn-danger">Cancel</button>
            <button type="submit" class="btn btn-success"> Save</button>
            <button type="submit" class="btn btn-primary">Save and Close</button>
        </div>
    </div>
        <div class="span12" style="margin-left: 0px !important;">
            <hr/>
        </div>
        <div class="span12" style="margin-left: 0px !important;">
        <div class="box-content span7">

            <fieldset>
                <!-- full-name input-->
                <div class="control-group">
                    <label class="control-label">Danh mục</label>
                    <div class="controls">
                        <select class="form-control" name="cat_id">
                            <?php $cat = Velacolib\Utility\Utility::getCategoryArray(); ?>
                            <?php foreach($cat as $key_cat=>$val_cat){    ?>
                                <option value="<?php echo $val_cat->id ?>"><?php echo $val_cat->title ?></option>
                            <?php  } ?>
                        </select>
                    </div>
                </div>
                <!-- address-line1 input-->
                <div class="control-group">
                    <label class="control-label">Nơi bán</label>
                    <div class="controls">
                        <select class="form-control" name="topic_location">
                            <?php $loc = Velacolib\Utility\Utility::getLocationArray(); ?>
                            <?php foreach ($loc as $k=>$c) { ?>
                                <option value="<?php echo $k ?>"><?php echo $c ?></option>
                            <?php } ?>
                        </select>

                    </div>
                </div>
                <!-- address-line2 input-->
                <div class="control-group">
                    <label class="control-label">Cần bán | Cần mua</label>
                    <div class="controls">
                       <input checked type="radio" name="topic_type" value="0"> Cần bán
                        <input  type="radio" name="topic_type" value="1"> Cần mua
                    </div>
                </div>
                <!-- city input-->
                <div class="control-group">
                    <label class="control-label">Tình trạng</label>
                    <div class="controls">
                        <input checked type="radio" name="is_brandnew" value="1"> Mới
                        <input  type="radio" name="is_brandnew" value="0"> Cũ
                    </div>
                </div>
                <!-- region input-->
                <div class="control-group">
                    <label class="control-label">Tiêu đề</label>
                    <div class="controls">
                        <input  name="title" type="text"  class="input-xxlarge" required>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">Giá</label>
                    <div class="controls">
                        <input  name="price" type="text"  class="input-xxlarge" required>
                    </div>
                </div>


                <!-- postal-code input-->
                <div class="control-group">
                    <label class="control-label">Nội dung</label>
                    <div class="controls">
                        <textarea name="full_description" class="input-xxlarge" required  rows="15"></textarea>

                    </div>
                </div>
                <!-- country select -->
                <div class="control-group">
                    <label class="control-label">Hình ảnh</label>
                    <div class="controls">
                        <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>

                        <br/>
                        <div id="gallery">
                            <span class="btn btn-primary" id="pickfiles" href="javascript:;">Chọn ảnh</span>

                        </div>
                        <div  id="listimage">

                        </div>
                        <div id="console"></div>

                    </div>
                    </div>


        </div>
             <div class="span5">
                 <div class="control-group">
                     <label class="control-label">Họ tên</label>
                     <div class="controls">
                         <input type="text" name="name" required>
                     </div>
                 </div>

                 <div class="control-group">
                     <label class="control-label">Email</label>
                     <div class="controls">
                         <input type="email" name="email" required>
                     </div>
                 </div>

                 <div class="control-group">
                     <label class="control-label">Điện thoại</label>
                     <div class="controls">
                         <input type="text" name="phone" required>
                     </div>
                 </div>

                 <div class="control-group">
                     <label class="control-label">Địa chỉ</label>
                     <div class="controls">
                         <input type="text" name="address" required>
                     </div>
                 </div>
             </div>
        </div>
        </div>

    </div>
</form>
</div>
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/pupload/plupload.full.min.js"></script>
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/price_format.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="text/javascript">
    // Custom example logic
    $(document).ready(function () {
        $("#addTopic").validate();

        $(document).on('click','i',function(){
            var id = $(this).attr('dataid');
            $("div[dataid='"+id+"']").remove();
            $("input#"+id).remove();
        })  ;

        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles', // you can pass in id...
            container: document.getElementById('gallery'), // ... or DOM Element itself
            url: '/raovat/addtopicimg',
            flash_swf_url: 'js/pupload/Moxie.swf',
            silverlight_xap_url: 'js/pupload/Moxie.xap',

            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,
            autostart : true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            filters: {
                max_file_size: '10mb',
                mime_types: [
                    {title: "Image files", extensions: "jpg,gif,png,jpeg"},
                    {title: "Zip files", extensions: "zip"}
                ]
            },

            init: {
                PostInit: function () {
                    document.getElementById('filelist').innerHTML = '';

                },

                FilesAdded: function (up, files,response) {
                    plupload.each(files, function (file) {
                        document.getElementById('filelist').innerHTML += '<div style="display: none" id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                            '</div>';
                    });
                    uploader.settings.multipart_params = {user_id:1 };
                    uploader.start();
                },

                FileUploaded: function(up, file, info) {
                    // Called when file has finished uploading   + '<input type="hidden" name="gel[]" value="'+file.name+'">'+
                    var i = 0;
                    $.each( info, function( key, value ) {
                        i++;
                        var d = new Date();
                        id = d.getTime();
                        if(parseInt(i) == 1 ){
                            var input =   '<input id="'+id+'" type="hidden" name="image[]" value="'+value+'">';
                            var imasge = '<div dataid="'+id+'" class="list-image-item" style="width:98px;float:left"><img style="width: 98px;height: 80px" src="'+value+'" /><i dataid="'+id+'"   class="icon-trash"></i></div>';
                            $("#filelist").append(input);
                            $("#listimage").append(imasge);
                        }


                    } );
                },
                UploadComplete: function(up, files) {
                    // Called when all files are either uploaded or failed
                    //  console.log('[UploadComplete]');
                    $('.loading').hide();
                },
                UploadProgress: function (up, file) {
                    $('.loading').show();
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                },

                Error: function (up, err) {
                    document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
                }
            }
        });

        uploader.init();
    });


</script>